<template>
  <div class="navigator" :style="`background-color:${title_back};`">
    <!-- 左箭头 -->
    <div :class="left_show == true ? 'left' : 'left_item'" @click="leftbtn()">
        
    </div>
    <!-- 标题部分 -->
    <div class="title">
        {{  title }}
    </div>
    <!-- 右边按钮部分 -->
    <div class="btn" @click="rightBtn()" :style="`color:${right_color};`">
        {{ right_show == true ? right_txt : '' }}
    </div>
  </div>
</template>

<script>
    export default {
        props: {
            // 控制左箭头显示还是不显示的 数据
            left_show: {
                type: Boolean,
                default: () => {
                    // 默认为true
                    return true
                }
            },
            // 控制标题的文本
            title: {
                type: String,
                default: () => {
                    // 默认为空字符
                    return ''
                }
            },
            // 控制 右边的按钮是否显示
            right_show: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            // 控制右边的按钮的文字
            right_txt: {
                type: String,
                default: () => {
                    return ''
                }
            
            },
            // 控制右边显示的文字颜色
            right_color:{
                type: String,
                default: () => {
                    return '#fff'
                }
            },
            // 控制标题的背景颜色
            title_back: {
                type: String,
                default: () => {
                    return 'rgb(50, 134, 255)'
                }
            }
        },
        methods: {
            leftbtn(){
                this.$router.back()
            },
            rightBtn(){
                // 向父组件传递信息
                this.$emit('rightBtn')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .navigator{
        width: 100%;
        height: 44px;
        line-height: 44px;
        background-color: cornflowerblue;
        color: #fff;
        display: flex;
        position: fixed;
        left: 0;
        top:0;
        .left,
        .left_item,
        .btn{
            width: 15%;
            text-align: center;
            font-size: 13px;
        }
        
        .left{
            position: relative; 
            &::after{
                position: absolute;
                content: "";
                width: 9px;
                height: 9px;
                border-top: 2px solid #fff;
                border-left: 2px solid #fff;
                transform: rotate(-45deg);
                top: 17px;
            }  
        }
        .title{
            width: 70%;
            text-align: center;
        }
    }
</style>